<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>用户注册-蜗牛K15在线教育</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/web.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/k15.css}"/>
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/jquery.validate.js}"></script>
    <script th:src="@{/js/layer/layer.js}"></script>
    <script>
        // layer.alert('内容')
        $(function () {
            let account = $("#u-account-reg");
            account.blur(function () {
                $.getJSON("/member/exist?account=" + account.val(), function (r) {
                    if (r.code == 200) {
                        if (r.data) {
                            account.next().text("账号已存在")
                        } else {
                            account.next().text("账号可用")
                        }
                    }
                });
            });

            $("#memberForm").validate({
                rules: {
                    account: {
                        required: true,
                        minlength: 3,
                        maxlength: 10
                    },
                    password: "required"
                },
                messages: {
                    account: {
                        required: "账号不能为空!",
                        minlength: "账号长度不少于3",
                    },
                    password: ""
                }
            })
        })
    </script>
    <style>
        .error {
            border: 1px red solid
        }
    </style>
</head>
<body class="W-body">
<div class="in-wrap">
    <header th:replace="~{commons::#header}"/>
    <div id="reg-div" class="bg-fa of">
        <div class="mt10"><p class="e-l-jy"></p></div>
        <form th:action="@{/member/regist}" method="post" id="memberForm">
            <div>
                <ol class="e-login-options">
                    <li><input id="u-account-reg" type="text" name="account" placeholder="请输入账号"/>
                        <span class="lr-tip-wrap"></span></li>
                    <br>
                    <li><input id="u-email-reg" type="text" placeholder="请输入邮箱"/>
                        <p class="lr-tip-wrap"></p></li>
                    <li><input id="u-mobile-reg" type="text" placeholder="请输入手机号"/>
                        <p class="lr-tip-wrap"></p></li>
                    <li><input id="u-password-reg" type="password" placeholder="请输入密码"/>
                        <p class="lr-tip-wrap"></p></li>
                    <li><input id="u-passwordre-reg" type="password" placeholder="请再输入一次密码"/>
                        <p class="lr-tip-wrap"></p></li>
                    <li><input id="u-randomcode-reg" class="fl" style="width: 100px;" type="text"
                               placeholder="请输入验证码"/>
                        <a href="javascript:void(0)" title="" class="vam ml10 disIb fl"><img
                                alt="验证码，点击图片更换"
                                th:src="@{/member/captcha}" width="86" height="40"></a>
                        <span class="c-999 fl ml10">看不清<br><a
                                href="javascript:void(0)" class="js-verify-refresh c-green">换一张</a>
                                </span>
                        <p class="lr-tip-wrap"><span class="c-red"></span></p>
                        <p class="clear"></p></li>
                </ol>
                <section class="mt20 tac">
                    <button class="e-login-btn">注 册</button>
                </section>
        </form>
    </div>
</div>
<!-- 公共底引入 -->
<footer th:replace="~{commons::#footer}"/>
</div>
</body>
</html>
